<template>
    <div class="add-paper-right box-border border-radius-md full">
      <el-row>
        <h1>{{contest.name}}</h1>
      </el-row>
      <el-row>
        <el-col align="left" :span="16">
          考试时间:
          <el-date-picker
            v-model="times"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            @change="onTimeChange"
            align="right">
          </el-date-picker>
        </el-col>
        <el-col :span="8">
          考试时长:
          <el-time-select
            v-model="contest.timeLen"
            :picker-options="{
            start: '00:01',
            step: '00:01',
            end: '24:00'
          }"/>
        </el-col>
      </el-row>
      <el-divider />
      <add-ques-item-checked v-for="(q, index) in contest.ques" :key="index" :ques="q"/>
      <add-ques-item-idle />
      <choose-ques-dialog :key="key" />
    </div>
</template>

<script>
import AddQuesItemIdle from './AddQuesItemIdle'
import AddQuesItemChecked from './AddQuesItemChecked'
import ChooseQuesDialog from './ChooseQuesDialog'
export default {
  mounted () {
    this.$bus.$on('created-ques', () => {
      this.key++
    })
    this.$bus.$on('alter-ques', () => {
      this.key++
    })
  },
  data () {
    return {
      key: 100,
      times: []
    }
  },
  components: {
    AddQuesItemIdle,
    AddQuesItemChecked,
    ChooseQuesDialog
  },
  props: {
    contest: {
      type: Object,
      required: true
    }
  },
  methods: {
    onTimeChange () {
      console.log(this.times)
      if (this.times.length === 2) {
        this.contest.startTime = this.times[0]
        this.contest.endTime = this.times[1]
      }
    }
  }
}
</script>

<style scoped lang="less">
  .add-paper-right {
    overflow-y: scroll;
    background: white;
    width: 1140px;
    margin-right: 40px;
    padding: 20px 70px;
  }
</style>
